<!--
操作框
v1.0.1 close事件绑定，自定义确认文字，允许隐藏底部
v1.0.0
-->
<template>
  <div class="sh-operlist" @tap.self="close()" :class="{'sh-operlist-show':show}">
    <div class="sh-operlist-main">
      <div class="sh-operlist-title" v-if="title">
        {{title}}
      </div>
      <div class="sh-operlist-content">
        <slot></slot>
      </div>
      <div class="sh-operlist-footer" v-if="!hide_footer">
        <sh-btn type="primary"
                @tap="ok()">
          {{ok_text || '确定'}}
        </sh-btn>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'sh-operlist',
    props: {
      title: {
        type: String,
        require: false,
      },
      show: {
        require: false,
        default: false,
      },
      ok_text: {
        require: false,
      },
      hide_footer: {
        require: false,
      },
    },
    data() {
      return {
        this_show: '',
      }
    },
    beforeMount: function () {

    },
    mounted: function () {
    },
    methods: {
      close() {
        this.$emit('update:show', false);
        this.$emit('close');
      },
      ok() {
        this.$emit('ok');
      },
    },
    watch: {},
  };
</script>
<style>
  .sh-operlist {
    position: fixed;
    top: 0;
    left: -100%;
    height: 100%;
    width: 100%;
    z-index: 10000;
    background-color: rgba(0, 0, 0, 0.7);
  }

  .sh-operlist-show {
    left: 0;
  }

  .sh-operlist-show .sh-operlist-main {
    bottom: 0;
    display: block;
    /*height: 100%;*/
    animation: slideUp 0.3s;
  }

  /*通用*/
  .sh-hide {
    display: none;
  }

  .sh-operlist-main {
    position: absolute;
    width: 100%;
    background: #fff;
    z-index: 10001;
    bottom: -100%;

    display: none;
    animation: slideDown 0.3s;
  }

  .sh-operlist-title {
    text-align: center;
    padding: 0.75rem 0.2rem;
    border-bottom: 1px solid #ebebeb;
    font-size: 0.75rem;
  }

  .sh-operlist-content {
    max-height: 20rem;
    overflow: auto;
  }

  .sh-operlist-footer {
    border-top: 1px solid #ebebeb;
    padding: 0.5rem;
  }

  @keyframes slideUp {
    0% {
      bottom: -100%;
    }
    100% {
      bottom: 0;
    }
  }

  @keyframes slideDown {
    0% {
      bottom: 0;
    }
    100% {
      bottom: -100%;
    }
  }

  @-webkit-keyframes slideUp {
    0% {
      bottom: -100%;
    }
    100% {
      bottom: 0;
    }
  }

  @-webkit-keyframes slideDown {
    0% {
      bottom: 0;
    }
    100% {
      bottom: -100%;
    }
  }
</style>
